<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {  //配置标题组件，包含主标题和副标题
                text: '这里是绘制图表的标题',
                subtext: '这里是副标题'
            },
            tooltip: {},
            legend: {  //配置图例组件，一个echarts图表中可以存在多个图例组件
                data: ['销量']
            },
            xAxis: {  //配置x轴坐标系
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},  //配置y轴坐标系
            series: [{  //配置系列列表，每个系列通过type控制该系列图表类型
                name: '销量',
                type: 'bar',  //设置柱状图
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>

</html>